<template>
  <div class="main-div">
    <Row>
      <Col span="24">
        <Card dis-hover class="task-card">
          <div class="app-container">
            <Form :model="addForm" :label-width="80" :rules="ruleValidate" ref="addForm">
              <FormItem label="名称" prop="name">
                <Input v-model="addForm.name"  class="input_w" ></Input>
              </FormItem>
              <FormItem label="图标" prop="iconClass">
                <icon-picker    v-model="addForm.iconClass"  class="input_w" ></icon-picker>
              </FormItem>

              <FormItem label="流程" prop="modelName">
                <Input v-model="addForm.modelName"   class="input_w"  style="width: 180px" disabled></Input>
                <Button type="primary"   @click="selectProcess">选择</Button>
              </FormItem>
              <FormItem label="描述" prop="description">
                <Input  v-model="addForm.description"  class="input_w"  type="textarea" :autosize="{minRows: 2,maxRows: 5}"></Input>
              </FormItem>
              <FormItem>

                <Button type="primary" @click="handleSubmitForm('addForm')">确定</Button>
                <Button @click="handleResetForm('addForm')">取消</Button>
              </FormItem>
            </Form>


          </div>
        </Card>
        <Modal
          :mask-closable="false"
          title="选择流程"
          v-model="addModel"
          :transfer="false"
          width="80%">
          <div>
            <el-form :inline="true" :model="queryForm">
              <el-form-item label="名称">
                <el-input v-model="queryForm.name"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="default" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
            <Row>

              <Col span="22" class="no-padding border-bottom border-right boder-margin">
                <Table border highlight-row ref="selection" height="450"
                       :columns="tableColumns" :data="tableData" style="padding-left: 10px;padding-top: 10px"></Table>
                <Page ref="pages" :total="total" show-elevator @on-change="changePanel" style="margin-top: 3px"/>
                <!--          @on-change="changePanelUser"-->
              </Col>
            </Row>

          </div>
          <div slot="footer">
            <el-button type="primary"     @click="handleSubmit('addForm')"  :loading="loading">确定</el-button>
            <el-button  @click="handleReset('addForm')" >取消</el-button>

          </div>

        </Modal>
      </Col>


    </Row>


    <Row>
      <Col span="24">
      </Col>
    </Row>
  </div>

</template>

<script>
  import {loadWfModule,loadProcess,saveLoadProcess,getWfModuleById} from "@/api/bpmOftenFlow";

  export default {
    name: 'Task',
    components: {
    },

    data() {

      return {
        loading:false,
        ruleValidate: {
          name: [
            { required: true, message: '名称必须填写', trigger: 'blur' }
          ],
          iconClass: [
            { required: true, message: '图标必须填写', trigger: 'blur' }
          ],
          modelName: [
            { required: true, message: '流程必须填写', trigger: 'change' }
          ],

        },
        addModel:false,
        currentRow:{},
        addForm: {
          name: "",
          id: "",
          parent: 1,
          groupName: '常用流程',
          cate_tree: '',
          nodeInfoType: 'MENU',
          iconClass: '',
          modelName: '',
          modelKey: '',
          description: '',

        },
        tableData: [],
        tableColumns: [
          {
            title: '选择',
            key: 'id',
            width: 70,
            align: 'center',
            render: (h, params) => {
              let id = params.row.defId;
              let flag = false;
              if (this.currentRow.defId === id) {
                flag = true
              } else {
                flag = false
              }

              let self = this
              return h('div', [
                h('Radio', {
                  props: {
                    value: flag
                  },
                  on: {
                    'on-change': () => {
                      this.currentRow = params.row;
                    }
                  }
                })
              ])
            }
          },
          {
            title: '名称',
            key: 'name'
          },
          {
            title: '别名',
            key: 'modelKey'
          },
          {
            title: '描述',
            key: 'description'
          },
        ],
        tableHeight: 450,
        queryDate: [],
        total: 0,
        chartVisible: false,
        forbiddenSwitch: false,
        modal_loading: false,
        msgModal: false,
        delMsgModal: false,
        delMsgModalId: "",
        chartData: {},
        sellerId: 0,
        shopName: [],
        messageTemplate: {},
        queryForm: {
          page: 0,
          limit: 10,
          name:"",
          status:1,
          type:2
        },
        categoryData: []
      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created() {
     // this.getData()
      var query= this.$route.query;
      this.addForm.id=query.id;
      if (query.id){
        //初始化数据
        this.getWfModuleById(query.id)
      }

    },
    methods: {
      getWfModuleById:function(id){
        getWfModuleById(id).then((response) => {
         if (response.code==0){
          var data= response.data;
           this.addForm.name=data.name;
           this.addForm.parent=data.parent;
           this.addForm.groupName=data.groupName;
           this.addForm.iconClass=data.iconClass;
           this.addForm.modelName=data.modelName;
           this.addForm.modelKey=data.modelKey;
           this.addForm.description=data.description;
         }
        })
      },
      changePanel:function(page){
        this.queryForm.page = page;
        this.getData()
      },
      handleSubmitForm:function(){
        this.$refs['addForm'].validate((valid) => {
          if (valid){
            this.loading=true
            saveLoadProcess(this.addForm).then((response) => {
              if (response.code == 0) {
                this.handleResetForm()

              }else{
                this.$message({"duration":800,message:response.msg,type:'warning',customClass:'zZindex'});

              }
              this.loading=false




            })
          }
        })


      },
      handleResetForm:function(){
        this.$store.dispatch('tagsView/delView', this.$route)
        this.go()
      },
      go: function () {
        this.$router.go(-1)
      },
      handleSubmit () {
        if(this.currentRow){
        this.addForm.modelName= this.currentRow.name
        this.addForm.modelKey= this.currentRow.modelKey
        }
        this.addModel=false
      },
      handleReset () {
        this.addModel=false
      },
      selectProcess: function () {
        this.getData()
       this.addModel=true

      },
      addBpmOftenFlow: function () {
        this.$router.push({name: 'addBpmOftenFlow', query: {t: new Date().getTime(), modelKey: item.modelKey}})
      },
      queryMethod: function () {
        var name = this.queryForm.name;
        var tmpCreateTime = this.queryForm.tmpCreateTime;
        if (tmpCreateTime) {
          if (tmpCreateTime[0]) {
            this.queryForm.createTime = tmpCreateTime[0] + " - " + tmpCreateTime[1];
          }
        }
      },

      getData: function () {
        loadProcess(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);

        })
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      search() {

      this.getData()
      },
      reset() {
        this.queryForm.name = "";
        this.getData()
      }

    }

  }

</script>
<style lang="scss" scoped>
  .main-div {
    background-color: #f3f3f3!important;
  }
  .task-card {
    margin-top: 10px;
  }
  .input_w {
    width: 30% !important;
  }


</style>
